<template>
  <div class="resume-preview-content">
    <div class="resume-paper">
      <!-- 简历标题和基本信息 -->
      <div class="resume-header">
        <h1 v-if="resume?.basic?.title" class="resume-title">
          {{ resume.basic.title }}
        </h1>
        
        <div class="personal-info" v-if="resume?.basic">
          <div class="info-item" v-if="resume.basic.name">
            <el-icon><user /></el-icon>
            <span>{{ resume.basic.name }}</span>
          </div>
          <div class="info-item" v-if="resume.basic.phone">
            <el-icon><phone /></el-icon>
            <span>{{ resume.basic.phone }}</span>
          </div>
          <div class="info-item" v-if="resume.basic.email">
            <el-icon><message /></el-icon>
            <span>{{ resume.basic.email }}</span>
          </div>
          <div class="info-item" v-if="resume.basic.location">
            <el-icon><location /></el-icon>
            <span>{{ formatLocation(resume.basic.location) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 求职意向 -->
      <div class="resume-section" v-if="hasJobExpectation">
        <h2 class="section-title">求职意向</h2>
        <div class="job-expectation">
          <div class="expectation-item" v-if="resume.basic.currentStatus">
            <label>当前状态：</label>
            <span>{{ resume.basic.currentStatus }}</span>
          </div>
          <div class="expectation-item" v-if="resume.basic.experience">
            <label>工作经验：</label>
            <span>{{ resume.basic.experience }}</span>
          </div>
          <div class="expectation-item" v-if="resume.basic.expectSalary">
            <label>期望薪资：</label>
            <span>{{ resume.basic.expectSalary }}</span>
          </div>
          <div class="expectation-item" v-if="resume.basic.expectLocation">
            <label>期望地点：</label>
            <span>{{ formatLocation(resume.basic.expectLocation) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 教育背景 -->
      <div class="resume-section" v-if="hasEducation">
        <h2 class="section-title">教育背景</h2>
        <div 
          v-for="(education, index) in resume.educations" 
          :key="`edu-${index}`"
          class="education-item"
        >
          <div class="item-header">
            <div class="item-title-left">
              <h3 class="school">{{ education.school }}</h3>
              <div class="details">
                <span>{{ education.degree }}</span>
                <span class="divider">|</span>
                <span>{{ education.major }}</span>
              </div>
            </div>
            <div class="date-range">
              {{ education.startDate }} - {{ education.endDate }}
            </div>
          </div>
          <div class="description" v-if="education.description">
            {{ education.description }}
          </div>
        </div>
      </div>
      
      <!-- 工作经历 -->
      <div class="resume-section" v-if="hasExperience">
        <h2 class="section-title">工作经历</h2>
        <div 
          v-for="(experience, index) in resume.experiences" 
          :key="`exp-${index}`"
          class="experience-item"
        >
          <div class="item-header">
            <div class="item-title-left">
              <h3 class="company">{{ experience.company }}</h3>
              <div class="position">{{ experience.position }}</div>
            </div>
            <div class="date-range">
              {{ experience.startDate }} - {{ experience.endDate }}
            </div>
          </div>
          <div class="description" v-if="experience.description">
            {{ experience.description }}
          </div>
        </div>
      </div>
      
      <!-- 项目经验 -->
      <div class="resume-section" v-if="hasProjects">
        <h2 class="section-title">项目经验</h2>
        <div 
          v-for="(project, index) in resume.projects" 
          :key="`proj-${index}`"
          class="project-item"
        >
          <div class="item-header">
            <div class="item-title-left">
              <h3 class="name">{{ project.name }}</h3>
              <div class="role">{{ project.role }}</div>
            </div>
            <div class="date-range">
              {{ project.startDate }} - {{ project.endDate }}
            </div>
          </div>
          <div class="description" v-if="project.description">
            {{ project.description }}
          </div>
        </div>
      </div>
      
      <!-- 技能证书 -->
      <div class="resume-section" v-if="hasSkills">
        <h2 class="section-title">技能证书</h2>
        
        <!-- 技能标签 -->
        <div class="skills-block" v-if="resume.skills.skillTags?.length">
          <h3 class="block-title">专业技能</h3>
          <div class="skill-tags">
            <el-tag
              v-for="(tag, index) in resume.skills.skillTags"
              :key="`skill-${index}`"
              size="large"
              class="skill-tag"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
        
        <!-- 证书 -->
        <div class="skills-block" v-if="resume.skills.certificates?.length">
          <h3 class="block-title">证书</h3>
          <ul class="certificates-list">
            <li 
              v-for="(certificate, index) in resume.skills.certificates" 
              :key="`cert-${index}`"
            >
              {{ certificate }}
            </li>
          </ul>
        </div>
        
        <!-- 语言能力 -->
        <div class="skills-block" v-if="resume.skills.languages?.length">
          <h3 class="block-title">语言能力</h3>
          <ul class="languages-list">
            <li 
              v-for="(language, index) in resume.skills.languages" 
              :key="`lang-${index}`"
            >
              {{ language }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { User, Phone, Message, Location } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  resume: {
    type: Object,
    required: true
  }
})

// 格式化位置
const formatLocation = (location) => {
  if (!location) return ''
  
  // 处理数组格式的位置
  if (Array.isArray(location)) {
    return location.join(' - ')
  }
  
  return location
}

// 计算属性：是否有求职意向
const hasJobExpectation = computed(() => {
  if (!props.resume?.basic) return false
  
  return !!(
    props.resume.basic.currentStatus ||
    props.resume.basic.experience ||
    props.resume.basic.expectSalary ||
    props.resume.basic.expectLocation
  )
})

// 计算属性：是否有教育经历
const hasEducation = computed(() => {
  return props.resume?.educations?.length > 0
})

// 计算属性：是否有工作经历
const hasExperience = computed(() => {
  return props.resume?.experiences?.length > 0
})

// 计算属性：是否有项目经验
const hasProjects = computed(() => {
  return props.resume?.projects?.length > 0
})

// 计算属性：是否有技能和证书
const hasSkills = computed(() => {
  if (!props.resume?.skills) return false
  
  return !!(
    (props.resume.skills.skillTags && props.resume.skills.skillTags.length) ||
    (props.resume.skills.certificates && props.resume.skills.certificates.length) ||
    (props.resume.skills.languages && props.resume.skills.languages.length)
  )
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.css';

.resume-preview-content {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);

  .section {
    margin-bottom: var(--spacing-xl);

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
  }

  .basic-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);

    .info-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);

      .label {
        color: var(--text-secondary);
        min-width: 70px;
      }

      .value {
        color: var(--text-primary);
      }
    }
  }

  .education-list,
  .experience-list {
    .item {
      margin-bottom: var(--spacing-lg);
      padding-bottom: var(--spacing-md);
      border-bottom: 1px dashed var(--border-color);

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .item-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--spacing-sm);

        .title {
          font-weight: 500;
          color: var(--text-primary);
        }

        .time {
          color: var(--text-secondary);
          font-size: var(--font-size-sm);
        }
      }

      .item-content {
        color: var(--text-secondary);
        line-height: var(--line-height-normal);
      }
    }
  }

  .skills {
    .skill-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
    }
  }

  .self-evaluation {
    white-space: pre-line;
    line-height: var(--line-height-normal);
    color: var(--text-secondary);
  }

  @media (max-width: 768px) {
    padding: var(--spacing-md);

    .basic-info {
      grid-template-columns: 1fr;
    }
  }
}
</style> 